<template>
    <div>
        <el-card class="box-card header">
            <div>
                {{'未处理 ' + number }}
            </div>
            <div>
                <el-button>打卡范围</el-button>
                <el-button type="primary">设置</el-button>
            </div>
        </el-card>
        <el-card class="box-card">
            <span>部门：</span>
            <el-checkbox-group v-model="isChecked" @change="handleCheckedCitiesChange">
                <el-checkbox 
                    v-for="(item, index) in checkList" 
                    :key="index"
                    :label="checkList[index].name"
                ></el-checkbox>
            </el-checkbox-group>
        </el-card>
        <el-card class="box-card">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    label="序号"
                  >
                    <template slot-scope="scope">
                        {{ params.pageSize*(params.page-1)+scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="姓名"
                    width="100"
                    >
                </el-table-column>
                <el-table-column
                    prop="workNumber"
                    label="工号"
                    width="120"
>
                </el-table-column>
                <el-table-column
                    prop="departmentName"
                    label="部门"
                    width="100"
>
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="手机"
                    width="120"
>
                </el-table-column>
               
                <!-- 动态生成考勤日期列 -->
                <template v-if="tableData.length > 0">
                    <el-table-column 
                        v-for="(day, dayIndex) in tableData[0].attendanceRecord"
                        :key="dayIndex"
                        :label="day.day.slice(4)"
                        align="center"
                        width="80"
                    >
                        <template slot-scope="scope">
                            {{ idList[scope.row.attendanceRecord[dayIndex].adtStatu] }}
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="pageChange"
                :current-page="params.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="params.pageSize"
                layout="total, prev, pager, next, sizes, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getDepartment } from '@/api/department'
import { getAttendances } from '@/api/attendance'

export default {
    data() {
        return {
            total: 0,
            number: 0,
            checkList: [],
            isChecked: [],
            params: {
                page: 1,
                pageSize: 10,
                deptID: ''
            },
            tableData: [],
            idList:{
              1: '正常',
                2: '旷工',
                3: '迟到',
                4: '早退',
                5: '外出',
                6: '出差',
                7: '年假',
                8: '事假',
                9: '病假',
                10: '婚假',
                11: '丧假',
                12: '产假',
                13: '奖励产假',
                14: '陪产假',
                15: '探亲假',
                16: '工伤假',
                17: '调休',
                18: '产检假',
                19: '流产假',
                20: '长期病假',
                21: '补签',
                22: '休息'
            }
        }
    },
    created() {
        this.getDepartment()
        this.render()
    },
    methods: {
        handleCheckedCitiesChange(list) {
            console.log(list)
        },
        async getDepartment() {
            const res = await getDepartment()
            console.log(res);
            
            this.checkList = res.map(item => {
                return {
                    name: item.name,
                    id: item.id
                }
            })
        },
        pageChange(page) {
            this.params.page = page
            this.render()
        },
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize
            this.render()
        },
        async render() {
            try {
                const { data } = await getAttendances(this.params)
                this.total = data.total
                this.$set(this,'tableData',data.rows)
                console.log(this.tableData)
            } catch (error) {
                console.error('获取考勤数据失败:', error)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.box-card {
    margin: 5px;
}
::v-deep .header .el-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
::v-deep thead.has-gutter th{
    background-color: #f4f6f8;
  }
</style>